<template>
  <div class="AdminUser">
    <Layout :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">

        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
          <Strong>用户账号管理</Strong>
        </Header>
        <content>
          <Row>
            <Col span="22">&nbsp;</Col>
            <Col span="2">
              <Button type="primary" @click="addRulesOpen = true">新增管理员</Button>
              <!--隐藏弹框-->
              <Modal v-model="addRulesOpen" title="新增用户" width = "30%">
                <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
                  <FormItem label="用户名称" prop="username" style="width:80%">
                    <Input type="text" v-model="formCustom.username"></Input>
                  </FormItem>
                  <FormItem label="密码" prop="password" style="width:80%">
                    <Input type="text" v-model="formCustom.password"></Input>
                  </FormItem>
                  <FormItem label="联系邮箱" prop="email" style="width:80%">
                    <Input type="text" v-model="formCustom.email"></Input>
                  </FormItem>
                  <FormItem label="角色id" prop="roleId" >
                    <Select v-model="formCustom.roleId" placeholder="请选择角色" size="large" style="width:30%">
                      <template v-for=" roleInfo in roleInfoList">
                        <Option :value=roleInfo.roleId>{{ roleInfo.name }}</Option>
                      </template>
                    </Select>
                  </FormItem>
                  <FormItem label="激活状态" prop="status">
                    <RadioGroup v-model="formCustom.status">
                      <Radio label="true" >是</Radio>
                      <Radio label="false" >否</Radio>
                    </RadioGroup>
                  </FormItem>
                </Form>
                <div slot="footer">
                  <Button type="text" size="large" @click="addRulesOpen=false">取消</Button>
                  <Button type="primary" size="large" @click="handleSave(-1,'formCustom')">确定</Button>
                </div>
              </Modal>
            </Col>
          </Row>

            <!--表格-->
            <Table border :columns="columns" :data="pageInfoResponse.list" size="large">
              <template slot-scope="{ row, index }" slot="actionStatus">
                <Button v-if="row.status" type="primary" @click="activeStatus(row.id,false)" >冻结</Button>
                <Button v-else="row.status" type="warning" ghost @click="activeStatus(row.id,true)">激活</Button>
              </template>
              <template slot-scope="{ row, index }" slot="action">
                <Button type="error" @click="removeRules(index,row.id)">删除</Button>
              </template>
            </Table>
        </content>
        <footer>
          <template>
            <Page :total="pageInfoResponse.total" @on-change="getResourceList" :page-size="pageInfoRequest.pageSize" />
          </template>
        </footer>
    </Layout>

  </div>
</template>

<!--suppress TypeScriptUnresolvedVariable -->
<script lang="ts">
  import {Component, Vue, Watch} from 'vue-property-decorator'
  import {adminUserUrl, getUserInfoByUserParamUrl,addAdminUserUrl,deleteAdminUser,handleAdminUserStatusUrl,getCeSecurityRoleListUrl} from '@/common/HttpRequestUrl'
  @Component
  export default class AdminUser extends Vue {

    //========================================================================分页列表=========================================================================
    //=========================================================================================================================================================
    //  表单对应的列名
    columns= [
      {
        title: '用户账号',
        key: 'username',
        align: 'center'
      },
      {
        title: '用户邮箱',
        key: 'email',
        align: 'center'
      },
      {
        title: '角色',
        key: 'roleName',
        align: 'center'
      },
      {
        title: '激活状态',
        slot: 'actionStatus',
        align: 'center'
      },
      {
        title: '注册时间',
        key: 'addTimeString',
        align: 'center'
      },
      {
        title: '操作',
        slot: 'action',
        align: 'center'
      }
    ]
    //  分页请求参数参数
    pageInfoRequest = {
      total : 0, //  数据总条数
      pageSize : 8,  //  每页的数据条数
      pageNum : 1 //  当前页数
    }
    //  分页返回参数
    pageInfoResponse = {
      list:[]
    }

    //  角色所有信息
    roleInfoList = []
    //  查询分页数据
    getResourceList ( pageNum, pageSize ) {

      if ( pageNum != null ) {
        this.pageInfoRequest.pageNum = pageNum
      }
      if ( pageSize != null ) {
        this.pageInfoRequest.pageSize = pageSize
      }
      let objThis = this
      this.$post(adminUserUrl,{pageNum:this.pageInfoRequest.pageNum,pageSize:this.pageInfoRequest.pageSize}).then(function (res) {

        if (res.status) {
          objThis.pageInfoResponse = res.data
        }
      })
    }

    // 初始化方法获取管理员列表数据
    mounted () {

      this.getResourceList(this.pageInfoRequest.pageNum,this.pageInfoRequest.pageSize)

      //  初始化所有角色信息
      let thisObj = this
      this.$get(getCeSecurityRoleListUrl).then(function (res) {
        if ( res.status ) {
          thisObj.roleInfoList = res.data
        }
      })
    }

    //========================================================================表单操作=========================================================================
    //=========================================================================================================================================================
    //  数据监听(监听到弹框关闭则重置弹框)
    @Watch("addRulesOpen")
    getCount( newVal ) {
      if ( !newVal ) {
        // @ts-ignore
        this.$refs['formCustom'].resetFields();
      }
    }
    editIndex = -1 // 当前聚焦的输入框的行数
    addRulesOpen = false  // 新增或者编辑规则开启弹框开关

    //  新增用户名称校验
    validataUsername = (rule, value, callback) => {

      if (value.length < 4) {
        return callback(new Error('用户名字符长度不少于4位'))
      }
      this.getUserInfoByUserParam(value).then(v => {

        if (v==null){
          return callback()
        }else {
          return callback(new Error('该用户名已存在'))
        }

      })
    }

    //  密码校验
    validataPassword = (rule, value, callback) => {

      if (value.length < 6) {
        return callback(new Error('密码长度至少不少于6位'))
      }
      return callback()
    }

    // 新增用户的的表单验证校验
    ruleCustom = {
      username: [
        {  required: true, validator: this.validataUsername, trigger: 'blur' }
      ],
      password: [
        {  required: true, validator: this.validataPassword, trigger: 'blur' }
      ],
      email: [
        {   type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
      ]
    }

    // 添加用户表单对应的值
    formCustom = {
      username: '',
      email: '',
      roleId: "1",
      status: 'true',
      password: ''
    }

    //  提交新增信息
    handleSave ( index, name ) {

      let thisObj = this
      // @ts-ignore
      this.$refs[name].validate((valid) => {

        thisObj.$post(addAdminUserUrl,thisObj.formCustom).then(function (res) {
          if (res.status) {
            thisObj.$Message.success("添加成功")
            thisObj.addRulesOpen = false;       //  关闭弹框
            thisObj.getResourceList(null,null)  //  刷新当前页

          } else {
            thisObj.$Message.error("添加失败")
          }
        })
      })
    }
    //  根据用户名同步获取用户信息
    async getUserInfoByUserParam (value) {

      let data = null
      await this.$get(getUserInfoByUserParamUrl,{username:value}).then(function (res) {
        if ( !res.status ) {

          this.$Message.error(res.data)
        } else if ( res.data != null ) {
          data = res.data;
        }

      })
      return data
    }

    //========================================================================删除操作=========================================================================
    //=========================================================================================================================================================
    //  删除信息
    removeRules ( index0, id ) {

      let thisObj = this
      //  对话框弹出层
      this.$Modal.confirm({
        title: '用户删除',
        content: '确认要删除该用户？',
        onOk: () => {

          thisObj.$post(deleteAdminUser,{id:id}).then(function (res) {
            if ( res.status ) {
              thisObj.$Message.success('删除成功');
              thisObj.pageInfoResponse.list.splice(index0, 1);
            }else {
              thisObj.$Message.error("删除失败")
            }
          })

        }
      });
    }

    //========================================================================激活与冻结操作=========================================================================
    //=========================================================================================================================================================
    activeStatus ( id,status ) {

      let title = "用户激活"
      let content = "确定要激活此用户?"
      if ( !status ) {
        title = "用户冻结"
        content = "确定要冻结此用户?"
      }

      let thisObj = this
      //  对话框弹出层
      this.$Modal.confirm({
        title: title,
        content: content,
        onOk: () => {

          thisObj.$post(handleAdminUserStatusUrl,{id:id,status:status}).then(function (res) {
            if ( res.status ) {
              thisObj.$Message.success('操作成功');
              thisObj.getResourceList(null,null)  //  刷新当前页
            }else {
              thisObj.$Message.error("操作失败")
            }
          })

        }
      });
    }

  }
</script>

<style scoped lang="less">

</style>
